import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Dialog,
    Arrow
} from './../../components';

import Options from './options';


interface Props  {
    type:string,
    options: Array<any>,
    onChange: Function,
    placeholder:string,
    value: Array<number> | number,
}

interface Item {
    id: number,
    label: string
}

class Select extends PureComponent<Props> {

    static defaultProps = {
        value: 0,
        type:``,
        options: [],
        placeholder:``,
        onChange: () => null
    }

    get isMultiple () {
        const {
            value
        } = this.props;
        return Array.isArray(value);
    }

    private onPress = () => {
        const {
            value,
            options,
            placeholder
        } = this.props;

        const content = (
            <Options
                value={value}
                title={placeholder}
                options={options}
                onConfirm={this.onConfirm}
            />
        )
        Dialog.show(content,{
            clickClose:true,
            direction:`bottom`
        })
    }

    private onConfirm = (
        items: Array<number>,
        multiple: boolean
    ) => {
        const {
            type,
            onChange
        } = this.props;
        items = items.sort();
        onChange(multiple ? items : items[0],type)
    }

    get selectItems() {
        const {
            value,
            options
        } = this.props;
        const _set = new Set([].concat(value as never));
        return options.filter((option:Item) => (
            _set.has(option.id as never)
        )) as Array<any>
    }

    get showName() {
        return this.selectItems.map((
            item:any) => item.label).join(` / `)
    }

    get renderItems() {
        if(this.selectItems.length <=0) {
            return null;
        }
        return (
            <View style={styles.content}>
                {this.selectItems.map((item:any,i:number) => {
                    return (
                        <View key={i} style={styles.itemStyle}>
                            <Text style={styles.text}>
                                {item.label}
                            </Text>
                        </View>
                    )
                })}
            </View>
        )
    }


    render() {
        const {
            placeholder
        } = this.props;
        return (
            <Arrow
                title={placeholder}
                onPress={this.onPress}
                value={this.isMultiple ? null : this.showName}
                children={this.isMultiple ? this.renderItems:null}
            />
        )
    }
}

export default Select;

const styles = StyleSheet.create({
    content:{
        flexWrap:`wrap`,
        paddingBottom:8,
        flexDirection:`row`
    },
    itemStyle:{
        height:22,
        marginRight:8,
        borderWidth:1,
        marginBottom:8,
        borderRadius:4,
        borderColor:`#888`,
        alignItems:`center`,
        paddingHorizontal:8,
        justifyContent:`center`
    },
    text:{
        fontSize:12,
        color:`#888`
    }
}) as any